
<div class="detail-view-container">
  <div class="container-bg"></div>
  <div class="detail">
    <div class="header">
      <a class="back-arrow" routerLinkActive="active" [routerLink]="['../']">
        <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </a>
      <!-- <div mat-card-avatar [style.background]="'#c7b7dd'">{{testSetInfo.name | name2avatar}}</div> -->
      <div class="header-text" *ngIf="mode!='new'">
        <div class="header-name">{{testSetInfo.name}}</div>
        <div class="header-detail">{{testSetInfo.detail | delHtmlTag}}</div>
      </div>
      <div class="header-text" *ngIf="mode=='new'">
        <div class="header-name">新建测试集</div>
      </div>
      <!-- <div class="header-text">
        <div class="header-name">{{testSetInfo.title ? testSetInfo.title : "新建测试集"}}</div>
        <div class="header-detail">{{testSetInfo.detail ? (testSetInfo.detail | delHtmlTag) : "测试集描述"}}</div>
      </div> -->
    </div>
    <mat-card>
      <form action="" [formGroup]="testSetForm" (ngSubmit)="onSubmit('one')">
        <div class="detail-content">
          <h5>基本信息</h5>
          <mat-form-field>
            <input matInput placeholder="测试集名称" [formControl]="name" [(ngModel)]="testSetInfo.name" name="name">
            <mat-error>{{formErrors.name}}</mat-error>
          </mat-form-field>

          <div class="editor">
            <span>测试集描述</span>
            <quill-editor [formControl]="detail" [(ngModel)]="testSetInfo.detail" [modules]="modules"></quill-editor>
          </div>

          <mat-form-field>
            <mat-select placeholder="指派给" [formControl]="memberId" [(ngModel)]="testSetInfo.memberId" required>
              <mat-option>未选择</mat-option>
              <mat-option *ngFor="let m of testMemberList" [value]="m.id">
                {{m.username}} - {{m.email}}
              </mat-option>
            </mat-select>
            <!-- <mat-hint>{{memberId.value?.email}}</mat-hint> -->
            <mat-error>{{formErrors.memberId}}</mat-error>
          </mat-form-field>

          <h5>所含测试案例</h5>

          <mat-form-field>
            <input type="text" matInput placeholder="点此搜索案例" [formControl]="searchControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let case of filteredCases | async" [value]="case.name" (click)="addCase(case)">
                {{ case.name}} - {{case.type}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

          <mat-accordion>
            <mat-expansion-panel *ngFor="let caseItem of testCaseList">
              <mat-expansion-panel-header>
                <mat-panel-title>{{ caseItem.name }}</mat-panel-title>
                <mat-panel-description>{{ caseItem.type }}</mat-panel-description>
              </mat-expansion-panel-header>
              <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(caseItem.detail)" class="fr-view" style="max-height: 150px;overflow: auto;"></div>
              <mat-action-row>
                <button mat-button (click)="viewCaseDetail(caseItem.id)">查看详情</button>
                <button mat-button (click)="deleteCase(caseItem.id)">移除案例</button>
              </mat-action-row>
            </mat-expansion-panel>
          </mat-accordion>
          <mat-error *ngIf="testCaseList.length==0">请添加相关测试案例</mat-error>
        </div>

        <div class="detail-footer">
          <button mat-button (click)="cancel()">关闭</button>
          <button mat-button type="submit" [disabled]="testCaseList.length==0&&!testSetForm?.valid">{{mode==='new'?'新建':'修改'}}</button>
          <button mat-button type="button" *ngIf="mode == 'new'" [disabled]="testCaseList.length==0&&!testSetForm?.valid" (click)="onSubmit('again')">再次新建</button>
        </div>
      </form>
    </mat-card>
  </div>
</div>

<toaster-container [toasterconfig]="toasterconfig"></toaster-container>

